<template>
  <el-container class="wrapper">
    <el-aside width="200px">
      <el-tree
          class="orange-menu"
      :data="data"
      default-expand-all
      @node-click="handleNodeClick">
        <template #default="{ node, data }">
          <img
          v-if="data.label === '会员中心'"
          :src="User"
          class="icon"
          style="margin-top:2px;margin-right:2px;"/>
          <img
          v-if="data.label === '个人资料'"
          :src="privateinfo"
          class="icon"
          style="margin-top:2px;margin-right:2px;"/>
          <img
          v-if="data.label === '密码修改'"
          :src="passwordchange"
          class="icon"
          style="margin-top:2px;margin-right:2px;"/>
          <img
          v-if="data.label === '我的收藏'"
          :src="mycollection"
          class="icon"
          style="margin-top:2px;margin-right:2px;"/>
          <img
          v-if="data.label === '钱包管理'"
          :src="moneymanagement"
          class="icon"
          style="margin-top:2px;margin-right:2px;"/>
          <img
              v-if="data.label === '我的优惠券'"
              :src="recharge"
              class="icon"
              style="margin-top:2px;margin-right:2px;"/>
<!--          <img -->
<!--          v-if="data.label === '充值'" -->
<!--          :src=""-->
<!--          class="icon"-->
<!--          style="margin-top:2px;margin-right:2px;"/>-->
          <img
          v-if="data.label === '充值转账'"
          :src="transfer"
          class="icon"
          style="margin-top:2px;margin-right:2px;"/>
          <img
          v-if="data.label === '操作记录'"
          :src="consumption"
          class="icon"
          style="margin-top:2px;margin-right:2px;"/>
          {{ data.label }}
        </template>
      </el-tree>
    </el-aside>
    <el-main>
      <div class="main-content">
        <router-view></router-view>
      </div>
    </el-main>
  </el-container>
</template>


<script setup>
import consumption from '@/components/icons/user/consumption.svg';
import moneymanagement from '@/components/icons/user/moneymanagement.svg';
import User from '@/components/icons/user/user.svg';
import privateinfo from '@/components/icons/user/privateinfo.svg';
import mycollection from '@/components/icons/user/mycollection.svg';
import recharge from '@/components/icons/user/recharge.svg';
import passwordchange from '@/components/icons/user/passwordchange.svg';
import transfer from '@/components/icons/user/transfer.svg';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const data = ref([
  {
    label: "会员中心",
    children: [
      { label: "个人资料", path: "/user" },
      { label: "密码修改", path: "/password-change" },
      { label: "我的收藏", path: "/my-collection" }
    ]
  },
  {
    label: "钱包管理",
    children: [
      { label: "我的优惠券", path: "/coupon" },
      { label: "充值转账", path: "/recharge-transfer" },
      { label: "操作记录", path: "/consumption-record" }
    ]
  }
]);

const router = useRouter();

const handleNodeClick = (nodeData) => {
  if (nodeData.path) {
    router.push(nodeData.path);
  }
};
</script>

<style lang="scss" scoped>
.wrapper {
  height: 100vh;
  .el-main{
    padding: 30px 20px;

  }
  .el-aside{
    padding: 30px 20px;
    margin-left: 10px  ;

  }

  .main-content{
    border-radius: 8px;
    background-color: #fff5e9;
  }
  ::v-deep .el-tree-node__content{
    border-radius: 8px;
    padding: 36px 0px;
    background-color: #fff5e9;
  }
  .orange-menu {
    ::v-deep .el-tree-node.is-current > .el-tree-node__content {
      background-color: #f1c27d; /* 橙色背景 */
      color: #fff; /* 白色文字 */
      border-radius: 8px;
      box-shadow: 0 0 8px rgba(255, 152, 0, 0.3); /* 橙色阴影 */
    }

    ::v-deep .el-tree-node.is-current .icon {
      filter: invert(100%) brightness(1.2); /* 图标变为白色 */
    }
  }

}

</style>
